import styles from './index.less';
import { useState } from 'react';
import { useIntl, connect, useStore, useSelector, useDispatch } from 'umi';
import { Space, Button, Modal, Form, Input, Select } from 'antd';

function InviteUserComponent() {
  const intl = useIntl();
  const [form] = Form.useForm();
  const inviteUserVisible = useSelector(
    (state) => state.system.inviteUserVisible,
  );
  const dispatch = useDispatch();

  const handleOk = () => {
    dispatch({ type: 'system/changeIUVisible', visible: false });
  };

  const handleCancel = () => {
    dispatch({ type: 'system/changeIUVisible', visible: false });
  };
  return (
    <Modal
      visible={inviteUserVisible}
      footer={null}
      onOk={handleOk}
      onCancel={handleCancel}
    >
      <div className={styles.iucontainer}>
        <div className={styles.head}>
          <div className={styles.iuh3}>
            {intl.formatMessage({ id: 'inviteuser_title' })}
          </div>
          <div className={styles.iup}>
            {intl.formatMessage({ id: 'inviteuser_subtitle' })}
          </div>
        </div>
        <div className={styles.content}>
          <Form form={form} layout="vertical">
            <Form.Item label={intl.formatMessage({ id: 'role' })}>
              <Select defaultValue="1">
                <Select.Option value="1">
                  {intl.formatMessage({ id: 'admin_auth' })}
                </Select.Option>
                <Select.Option value="2">
                  {intl.formatMessage({ id: 'staff_auth' })}
                </Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label={intl.formatMessage({ id: 'expiration' })}>
              <Select defaultValue="1">
                <Select.Option value="1">
                  {intl.formatMessage({ id: 'expires3days' })}
                </Select.Option>
                <Select.Option value="2">
                  {intl.formatMessage({ id: 'expires7days' })}
                </Select.Option>
                <Select.Option value="3">
                  {intl.formatMessage({ id: 'expires14days' })}
                </Select.Option>
                <Select.Option value="4">
                  {intl.formatMessage({ id: 'expires30days' })}
                </Select.Option>
              </Select>
            </Form.Item>
            <Form.Item label={intl.formatMessage({ id: 'invitationlink' })}>
              <Input
                disabled
                placeholder={intl.formatMessage({ id: 'p_e_u_uniquelink' })}
              />
            </Form.Item>
          </Form>
        </div>
        <div className={styles.foot}>
          <div className={styles.left}>
            <Button type="link" onClick={handleCancel}>
              {intl.formatMessage({ id: 'orsendinvitationemail' })}
            </Button>
          </div>
          <div className={styles.right}>
            <Space>
              <Button type="primary" onClick={handleOk}>
                {intl.formatMessage({ id: 'copy' })}
              </Button>
              <Button onClick={handleCancel}>
                {intl.formatMessage({ id: 'cancel' })}
              </Button>
            </Space>
          </div>
        </div>
      </div>
    </Modal>
  );
}

export default InviteUserComponent;
